<template>
	<view class="index">
		<image class="bgImg" src="/static/img/zgzbgs.png" mode="widthFix"></image>
		<view style="background: transparent;">
			<NavBar :title="newsData.title"></NavBar>
		</view>
		<scroll-view scroll-y="true" @scrolltolower="scrolltolower">
			<view class="details">
				<view class="detailsBox">
					<view class="companyProfile">
					<rich-text :nodes="newsData.content"></rich-text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import NavBar from '@/components/navBar.vue'
	import { onShow, onLoad, } from '@dcloudio/uni-app'
	import { getNewsById } from '@/utils/api/index.ts'
	const newsId=ref('')
	const newsData=ref({})
	const scrolltolower=()=>{
		console.log('触底')
	}
	function loadNewsById(){
		
		getNewsById({data:{newsId:newsId.value}}).then(res=>{
			newsData.value=res.data
		})
		
	}
	
	
	onLoad((option)=>{
		newsId.value=option.newsId
		loadNewsById()
	})
	
	
</script>

<style lang="scss" scoped>
	:deep(.navBarTop) {
		background-color: transparent;
		// color: #fff;
	}
	.index {
		
		.bgImg{
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
		height: 100vh;
		// background-color: #f4f6fa;
		display: flex;
		flex-direction: column;
		scroll-view{
			flex: 1;
			border-radius: 16rpx;
			overflow: auto;
			padding: 24rpx;
		}
		.details {
			.detailsBox {
				// background-color: #fff;
				padding: 32rpx 24rpx 32rpx;
				border-radius: 24rpx;

				.companyProfile {
					font-size: 28rpx;
					letter-spacing: 1rpx;
					color: #262626;

					.privacyPolicy {
						color: #1188ff;
					}
				}

				.detailsList {
					height: 74rpx;
					padding: 16rpx;
					background: #F4F6FA;
					border-radius: 16rpx;
					font-size: 28rpx;
					color: #262626;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 24rpx;
					font-weight: bold;

					image {
						width: 36rpx;
					}
				}
			}
		}
	}
</style>